<template>
<li v-for="item in items" :key="item.id">
    <div v-if="editingId === item.id">
        <input class="editInput" v-model="editingText" />
        <select v-model="editingClass">
            <option value="work">工作</option>
            <option value="study">学习</option>
            <option value="life">生活</option>
        </select>
        <button class="save" @click="saveEdit">保存</button>
        <button class="cancel" @click="cancelEdit">取消</button>
    </div>

    <div v-else>
        <input type="checkbox" :checked="item.over" @change="toggleItem(item.id)">
        <p :class="{'text' : item.over}">{{ item.text }}</p>
        <p class="tag">{{ item.itemClass == 'work' ? '工作' : item.itemClass == 'study' ? '学习' : '生活' }}</p>
        <button class="edit" @click=editItem(item)>编辑</button>
        <button class="delete" @click="deleteItem(item)">删除</button>
    </div>
</li>
</template>

<script>
    export default {
        name: 'main',
        props: {
            items: {
                type: Array,
                required: true,
            }
        },
        data() {
            return {
                editingId: '',
                editingText: '',
                editingClass: ''
            }
        },
        methods : {
            setItem() {
                localStorage.setItem('items', JSON.stringify(this.items));
            },
            editItem(item) {
                const {id, text, itemClass} = item;
                this.editingId = id;
                this.editingText = text;
                this.editingClass = itemClass.value;
            },
            saveEdit() {
                const item = this.items.find(i => i.id === this.editingId);
                if (!item) return;
                item.text = this.editingText;
                item.itemClass = this.editingClass;
                this.editingId = '';
                this.editingText = '';
                this.editingClass = '';
                this.setItem();
            },
            deleteItem(item) {
                this.$emit('delete-item', item);
            },
            toggleItem(id) {
                this.$emit('toggle-item', id);
            },
        }
    }
    
</script>

<style>
  ul {
    margin-bottom: 20px;
  }
  li {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  li > div {
    display: flex;
    align-items: center;
  }
  li div input {
    margin-right: 10px;
  }
  li div:nth-child(2) {
    font-size: 16px;
    line-height: 24px;
  }
  li div .text {
    color: #999;
    text-decoration: line-through;
  }
  li div .tag {
    font-size: 16px;
    background-color: #42b983;
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
    margin-left: auto;
  }
  li div button {
    margin-left: 10px;
  }
  .editInput {
    flex: 1;
    font-size: 16px;
    height: 24px;
    padding: 5px;
    border-radius: 5px;
  }
  li div select {
    height: 30px;
    padding: 0 8px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    outline: none;
  }

  li div select:focus {
    border-color: #42b983;
  }
  .save {
    background-color: #42b983;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
  }
  .cancel {
    background-color: #ccc;
    color: #333;
    border-radius: 5px;
    cursor: pointer;
  }
  .delete {
    background-color: #f44336;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
  }
</style>